import Vue from "vue";
import VueRouter from "vue-router";
import store from '@/store'

Vue.use(VueRouter);
import Home from '../views/home/home.vue'

const routes = [
  // 重定向到首页
  {
    path: '/',
    redirect: 'home'
  },
  // 首页路由 meta做标记方便动态跳转
  {
    path: '/home',
    component: Home,
    meta: {
      index: 1
    }
  },
  // 分类页路由 => 采用懒加载
  {
    path: '/category',
    component: () => import('../views/category/category.vue'),
    meta: {
      index: 1
    }
  },
  // 购物车路由
  {
    path: '/shopcart',
    component: () => import('../views/shopcart/shopcart.vue'),
    meta: {
      index: 1,
      flag: true
    }
  },
  // 用户我的路由
  {
    path: '/user',
    component: () => import('../views/user/user.vue'),
    meta: {
      index: 1,
      flag: true
    }
  },
  // 商品列表路由
  {
    path: '/productList/:id',
    component: () => import('../views/product-list/productList.vue'),
    meta: {
      index: 2
    }
  },
  // 商品详情路由
  {
    path: '/productDetail/:id',
    component: () => import('../views/product-detail/productDetail.vue'),
    meta: {
      index: 3
    }
  },
  // 登录页路由
  {
    path: '/login',
    component: () => import('../views/login/login.vue'),
    meta: {
      index: 2
    }
  },
  // 退出登录路由
  {
    path: '/loginOut',
    component: () => import('../views/loginOut/loginOut.vue'),
    meta: {
      index: 2
    }
  }
];

const router = new VueRouter({
  routes,
});

// 导航守卫
router.beforeEach((to, from, next) => {
  // 解决用户已经登录时不能在点击登录页的问题
  if (to.path === '/login' && store.getters.getIsLogin) {
    next('/user')
  }
  // 需要校验用户是否登录的页面（首页在为登录时点击购物车和我的页面时会跳到登录页面）
  // to结束页面 from开始页面
  // console.log(from);
  if (to.meta.flag) {
    // 判断当 isLogin 为false时跳转到登录页
    if (store.getters.getIsLogin) {
      next()
    } else {
      next('/login')
    }
  } else {
    // 不是那两个页面的话正常执行
    next()
  }
})

export default router;
